<template>
  <div class="comment">
      <div class="comment_top"><i> 评论</i></div>
      <div class="user_comment">
           <div class="user_img">
               <img src="../images/user.jpg" alt="" v-show="loginaccount==[]">
               <img :src="loginaccount.avatarUrl" alt="" v-show="loginaccount!==[]">
           </div>
          <div class="user_input">
              <textarea type='text' v-model="contents"></textarea>
          </div>
          <div class="btns">
              <button @click="setcontent(1)">评论</button>
          </div>
      </div>
        <div class="comment_hot" v-show="getcomment.hotComments!=={}"><i>精彩评论</i></div>
        <div class="user_comments" v-for="(m) in getcomment.hotComments" :key="m.id">
             <img src="../images/user.jpg" alt="" v-show="getcomment==[]">
               <img :src="m.user.avatarUrl" alt="" v-show="getcomment!==[]">
            <div class="user_speak">
                <a >{{m.user.nickname}}</a>
                :{{m.content}}
            </div>
               <div class="speak_time">{{m.time|dateFormat}}
                   <i class="iconfont icon-good">({{m.likedCount}})</i>
               </div>
        </div>
        <div class="comment_hot"><i>最新评论</i></div>
        <div class="user_comments" v-for="(m) in getcomment.comments" :key="m.id">
             <img src="../images/user.jpg" alt="" v-show="getcomment==[]">
               <img :src="m.user.avatarUrl" alt="" v-show="getcomment!==[]">
            <div class="user_speak">
                <a >{{m.user.nickname}}</a>
                :{{m.content}}
            </div>
               <div class="speak_time">{{m.time|dateFormat}}
  <i class="iconfont icon-good">({{m.likedCount}})</i>
               </div>
               </div>
               <div class="heights">已经到底了</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import {setcomment} from '@/api'
export default {
  name:'comments',
  props:['type','id'],
  data(){
      return{
          contents:''
      }
  },
  mounted(){
      this.$store.dispatch('loginaccount')

  },
 
  computed:{
      ...mapState({
          loginaccount:(state)=>{
              return state.second.getuser
          },
          getcomment:(state)=>{
              if(sessionStorage.getItem('plun')){
                  return JSON.parse(sessionStorage.getItem('plun'))
              }
              return state.second.getcomment
          }

         
      })
  },
  methods:{
       getcomments(){
           this.$store.dispatch('getgdcomment',this.id)
       },
      async setcontent(m){
           let data =new Date().getTime()
           let so ={content:'',time:'',likedCount:'',user:{avatarUrl:'',nickname:''}}
           console.log(this.loginaccount.avatarUrl);
            so.user.avatarUrl=this.loginaccount.avatarUrl
            so.time=data
            so.likedCount=0
            so.user.nickname=this.loginaccount.nickname
            so.content=this.contents
        
            //console.log(so);


        this.getcomment.comments.splice(0,0,so)
          sessionStorage.setItem('plun',JSON.stringify(this.getcomment))
       const res =await setcomment(m,this.id,this.type,this.contents)
        if(res.code==200){
            this.$message.success('评论成功')
       }
     
      
      //this.getcomments()
      //console.log(this.id);
     // console.log(this.type);
    // console.log(this.contents);
  }
  }
}
</script>

<style lang='less' scoped>
   .comment{
       width: 800px;
       height: 200px;
       .heights{
           height: 200px;
           width: 800px;
           text-align: center;
           font-size: 14px;
           opacity: 0.8;
       }
        .comment_top{
            width: 100%;
            height: 50px;
            border-bottom: 2px solid  blue;
             i{
             
               line-height: 60px;
                 font-size: 25px;
             }
        }
        .user_comment{
            margin-top: 10px;
            width: 800px;
            height: 150px;
            .user_img{
                float: left;
                  img{
                width: 100px;
                height: 100px;
            }
            }
           .user_input{
                float: left;
               width: 500px;
               height: 100px;
                margin-left: 10px;
                border: 1px solid gray;
               textarea{
                  
                   width: 480px;
                   height: 80px;
                   margin: 10px 10px;
                  outline: none;
                   resize: none;
                   overflow: auto;
  border: none;
                
               }
           }
             .btns{
                 float: left;
                 width: 50px;
                 height: 20px;
                 button{
                     width: 50px;
                 height: 20px;
                 background-color: #3282ce;
                 color: #fff;
                 font-weight: bold;
                 border:1px solid #2576c4;
                 margin-top: 82px;
                 margin-left: 10px;
                 cursor: pointer;
                 }
                 button:hover{
                   opacity: 0.8;
                 }
             }
        }
        .comment_hot{
              width: 100%;
               height: 20px;
                 border-bottom: 2px solid  #cfcfcf;
                 i{
                       font-size: 14px;
                     
                 }
        }
        .user_comments{
            width: 800px;
            height: 60px;
            padding: 10px 0px;
            img{
                   float: left;
                width: 60px;
                height: 60px;
            }
            .user_speak{
                float: left;
                width: 700px;
                height: 16px;
                font-size: 12px;
                 margin-left: 5px;
            }
            .speak_time{
                 float: left;
                  width: 700px;
                height: 16px;
                margin-top: 28px;
                  font-size: 12px;
                  margin-left: 5px;
                   i{
                       float: right;
                       font-size: 16px;
                       cursor: pointer;
                   }
            }
        }
   }
</style>